<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div {
           width: 600px;
           height: 100px auto;
       }

       .message {
           display: inline-block;
           font-size: 12px;
           color: #999;
           background: url(../p1378956633.91.jpg) no-repeat left center;
           padding-left: 5px;
       }
       .wrong {
           color: red;
           background: url(../p33190.jpg) no-repeat left center;
       }
       .right {
           color: green;
           background: url(../p1378956633.91.jpg) no-repeat left center;
       }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入密码</p>
    </div>
    <script>
        //1获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2.注册事件 失去焦点
        ipt.onblur = function() {
            //根据表单里边值的长度 ipt.value.lignth
            if(this.value.length < 6 || this.value.length > 16){
                //console.log('错误了')
                message.className = 'message wrong'
                message.innerHTML = '请输入6~~16之间的数字或字母'
            } else{
                message.innerHTML = '长度正确'
                message.className = 'message right'
            }
        }
    </script>
</body>

</html>